<template>
  <view class="flex-col page">
    <view class="flex-col self-stretch">
      <view class="flex-col self-stretch section">
        <view class="flex-row justify-between self-stretch"></view>
        <image class="self-center image_4 mt-95" src="@/static/icons/b-home.png" />
      </view>
      <text class="self-center text_2">MINIflix Video</text>
      <text class="self-center text_3">{{ $t('login.common.backstagemanagementsystem') }}</text>
    </view>
    <view class="flex-col self-stretch group">
      <view class="flex-col justify-start items-center self-stretch text-wrapper" @click="skipToLogByEmail">
        <text class="text_4">{{ $t('login.common.loginway') }}</text>
      </view>
      <text class="self-center text_5 text_6 mt-21" @click="signUp">{{ $t('login.common.signUp') }}</text>
    </view>
    <view class="self-center group_2">
      <text class="font">lf you continue, you agree to the</text>
      <text class="font text_5">Terms of Service</text>
      <text class="font">
        and
        <br />
      </text>
      <text class="font text_5">Privacy Policy</text>
    </view>
  </view>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {};
  },

  methods: {
    skipToLogByEmail() {
      console.log('使用邮箱登录');
      uni.navigateTo({
        url: '/pages/logIn/index'
      });
    },
    signUp() {
      console.log('注册');
      uni.navigateTo({
        url: '/pages/signUp/index'
      });
    }
  }
};
</script>

<style scoped lang="scss">
.ml-5 {
  margin-left: 0.31rem;
}

.mt-95 {
  margin-top: 5.94rem;
}

.mt-21 {
  margin-top: 1.31rem;
}

.page {
  padding-bottom: 3.13rem;
  background-color: #0c0323;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;

  .section {
    padding: 1.13rem 1.13rem 1.69rem 1.75rem;
    background-image: url('/static/login/bg-login.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .text {
      color: #ffffff;
      font-size: 0.94rem;
      font-family: PingFang SC;
      line-height: 0.7rem;
    }

    .image {
      width: 1.06rem;
      height: 0.69rem;
    }

    .image_2 {
      width: 0.94rem;
      height: 0.69rem;
    }

    .image_3 {
      width: 1.56rem;
      height: 0.75rem;
    }

    .image_4 {
      border-radius: 1.25rem;
      filter: drop-shadow(0rem 0rem 0.38rem #3640f62b);
      width: 5.5rem;
      height: 5.5rem;
    }
  }

  .text_2 {
    margin-top: 0.75rem;
    color: #ffffff;
    font-size: 2rem;
    font-family: PingFang SC;
    font-weight: 600;
    line-height: 1.48rem;
  }

  .text_3 {
    margin-top: 1.75rem;
    color: #ffffff;
    font-size: 1.13rem;
    font-family: PingFang SC;
    line-height: 0.83rem;
  }

  .group {
    margin-top: 6.63rem;
    padding: 0 2.19rem;

    .text-wrapper {
      padding: 1.13rem 0;
      background-color: #313131;
      border-radius: 0.38rem;

      .text_4 {
        color: #ffffff;
        font-size: 1rem;
        font-family: PingFang SC;
        line-height: 0.74rem;
      }
    }

    .text_6 {
      color: #00f6ff;
      font-size: 0.75rem;
      font-family: PingFang SC;
      line-height: 0.7rem;
    }
  }

  .group_2 {
    margin-top: 14.38rem;
    line-height: 0.88rem;
    text-align: center;
    width: 19.11rem;

    .font {
      font-size: 0.75rem;
      font-family: Alibaba PuHuiTi;
      line-height: 0.88rem;
      color: #ffffffb3;
    }
  }

  .text_5 {
    text-decoration: underline;
  }
}
</style>
